<%-- BeginRegion Tags and page properties --%>
<%@ Page Language="C#" MasterPageFile="~/Demo.master" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Editors_Calendar" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v8.2, Version=8.2.4.0, Culture=neutral, PublicKeyToken=49d90c14d24271b5" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%-- EndRegion --%>
<asp:Content ID="Content1" ContentPlaceHolderID="phContent" runat="server">
    <div>
        <%-- Temperature unit --%>
        <table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
            <tr>
                <td style="vertical-align: middle;">
                    <dxe:ASPxLabel ID="lblTemperatureUnit" runat="server" Text="Temperature unit:&nbsp;&nbsp;" ForeColor="#07519A" />
                </td>
                <td>
                    <dxe:ASPxComboBox ID="cbTemperatureUnit" runat="server" AutoPostBack="True" SelectedIndex="0" ForeColor="#07519A" 
                        EnableIncrementalFiltering="False" EnableViewState="False" EnableTheming="False">
                        <DropDownButton ImagePosition="Bottom">
                            <Image Height="5px" Width="7px" Url="Images/Calendar/TemperatureUnit/btnCBArrow.png"></Image>
                        </DropDownButton>
                        <ButtonStyle width="15px" BackColor="#EBF3FB">
                            <Paddings PaddingTop="2px" PaddingLeft="4px" PaddingRight="4px"></Paddings>
                            <HoverStyle>
                                <BackgroundImage Repeat="RepeatX" ImageUrl="Images/Calendar/TemperatureUnit/btnCBHover.png"></BackgroundImage>
                            </HoverStyle>
                            <BackgroundImage Repeat="RepeatX" VerticalPosition="bottom" ImageUrl="Images/Calendar/TemperatureUnit/btnCBNormal.png"></BackgroundImage>
                            <PressedStyle>
                                <BackgroundImage Repeat="RepeatX" ImageUrl="Images/Calendar/TemperatureUnit/btnCBPressed.png"></BackgroundImage>
                            </PressedStyle>
                            <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE"></Border>
                        </ButtonStyle>
                        <Border BorderColor="#AACCEE" BorderStyle="Solid" BorderWidth="1px" />
                        <ItemStyle>
                            <HoverStyle BackColor="#EAF1F9"></HoverStyle>
                            <SelectedStyle BackColor="#DFECF9"></SelectedStyle>
                        </ItemStyle>
                        <ListBoxStyle>
                            <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE"></Border>
                        </ListBoxStyle>
                        <Items>
                            <dxe:ListEditItem Value="Fahrenheit" Text="Fahrenheit"></dxe:ListEditItem>
                            <dxe:ListEditItem Value="Celsius" Text="Celsius"></dxe:ListEditItem>
                        </Items>
                    </dxe:ASPxComboBox>
                </td>
            </tr>
        </table>
        <br />
        <%-- Weather forecast --%>
        <dxe:ASPxCalendar ID="clndWeatherForecast" runat="server" OnDayRender="OnCalendarDayRender" ShowClearButton="False" 
            ShowTodayButton="False" ShowWeekNumbers="False" Font-Size="8pt" Font-Names="Trebuchet MS" ForeColor="#07519A" 
            ClientInstanceName="Calendar" EnableDefaultAppearance="False" SkinID="None" EnableViewState="False" BackColor="White">
            <ButtonStyle BackColor="#EBF3FB" Width="80px" Cursor="pointer">
                <HoverStyle BackColor="#E2ECF8" />
                <PressedStyle BackColor="#C4DCF4" />
                <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
            </ButtonStyle>
            <PrevMonthImage Height="17px" Width="19px" AlternateText="Previous month" Url="Images/Calendar/Elements/leftSingleArrow.png" />
            <NextMonthImage Height="17px" Width="19px" AlternateText="Next  month" Url="Images/Calendar/Elements/rightSingleArrow.png" />
            <BorderRight BorderStyle="None" />
            <DayHeaderStyle Font-Size="12pt">
                <BorderBottom BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
                <BorderRight BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
            </DayHeaderStyle>
            <MonthGridPaddings Padding="0px" />
            <Border BorderStyle="Solid" BorderColor="#AACCEE" BorderWidth="1px" />
            <NextYearImage Height="17px" Width="19px" AlternateText="Next year" Url="Images/Calendar/Elements/rightDoubleArrow.png" />
            <HeaderStyle Spacing="5px" HorizontalAlign="Center" Font-Size="16pt" BackColor="#EBF3FB" ForeColor="#51A8DF">
                <Paddings PaddingTop="3px" PaddingRight="5px" PaddingBottom="3px" PaddingLeft="5px" />
                <BackgroundImage Repeat="RepeatX" VerticalPosition="bottom" ImageUrl="Images/Calendar/Elements/headerBg.png" />
                <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
                <BorderTop BorderStyle="None" />
                <BorderLeft BorderStyle="None" />
            </HeaderStyle>
            <FastNavFooterStyle Spacing="5px" HorizontalAlign="Center" BackColor="#EBF3FB">
                <Paddings Padding="10px" />
                <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
                <BorderTop BorderStyle="None" />
            </FastNavFooterStyle>
            <FastNavMonthStyle Font-Italic="False" Cursor="pointer">
                <Paddings PaddingTop="5px" PaddingRight="2px" PaddingBottom="5px" PaddingLeft="2px" />
                <HoverStyle BackColor="#E2ECF8">
                    <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
                </HoverStyle>
                <SelectedStyle BackColor="#C4DCF4" />
            </FastNavMonthStyle>
            <DayOtherMonthStyle ForeColor="#C9DEF4">
                <BackgroundImage ImageUrl="Images/Calendar/Elements/otherMonthDayBg.png" />
            </DayOtherMonthStyle>
            <PrevYearImage Height="17px" Width="19px" AlternateText="Previous year" Url="Images/Calendar/Elements/leftDoubleArrow.png" />
            <DayStyle VerticalAlign="Top" Cursor="default">
                <Paddings Padding="3px" />
                <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
                <BorderTop BorderStyle="None" />
                <BorderLeft BorderStyle="None" />
            </DayStyle>
            <FastNavPrevYearImage Height="17px" Width="19px" AlternateText="Previous year" Url="Images/Calendar/Elements/leftSingleArrow.png" />
            <FastNavYearStyle Cursor="pointer">
                <Paddings PaddingTop="2px" Padding="4px" />
                <HoverStyle BackColor="#E2ECF8">
                    <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
                </HoverStyle>
                <SelectedStyle BackColor="#C4DCF4" />
            </FastNavYearStyle>
            <BorderBottom BorderStyle="None" />
            <FastNavNextYearImage Height="17px" Width="19px" AlternateText="Next year" Url="Images/Calendar/Elements/rightSingleArrow.png" />
            <DaySelectedStyle BackColor="#E2ECF8" />
            <FastNavStyle MonthYearSpacing="8px" HorizontalAlign="Center" VerticalAlign="Top" Font-Size="12pt" Font-Bold="False" 
                BackColor="#EBF3FB" ImageSpacing="12px">
                <Paddings Padding="10px" />
                <Border BorderWidth="1px" BorderStyle="Solid" BorderColor="#AACCEE" />
            </FastNavStyle>
        </dxe:ASPxCalendar>
    </div>
</asp:Content>
